<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>历史留言</title>

    <link rel="stylesheet" th:href="@{/static/css/feedback/messageDetails.css}" />
    <link rel="stylesheet" th:href="@{/static/css/default/jquery.mobile-1.4.2.min.css}" />
    <script th:src="@{/static/js/default/jquery-2.0.3.min.js}"></script>
    <script th:src="@{/static/js/default/jquery.mobile-1.4.2.min.js}"></script>
    <style>

        /* Left transition */
        li.left {
            -webkit-transition: -webkit-transform 250ms ease;
            -webkit-transform: translateX(-100%);
            -moz-transition: -moz-transform 250ms ease;
            -moz-transform: translateX(-100%);
            -o-transition: -o-transform 250ms ease;
            -o-transform: translateX(-100%);
            transition: transform 250ms ease;
            transform: translateX(-100%);
        }
        /* Right transition */
        li.right {
            -webkit-transition: -webkit-transform 250ms ease;
            -webkit-transform: translateX(100%);
            -moz-transition: -moz-transform 250ms ease;
            -moz-transform: translateX(100%);
            -o-transition: -o-transform 250ms ease;
            -o-transform: translateX(100%);
            transition: transform 250ms ease;
            transform: translateX(100%);
        }
        /* Border bottom for the previous button during the transition*/
        li.left a.ui-btn,
        li.right a.ui-btn {
            border-top-width: 0;
            border-left-width: 1px;
            border-right-width: 1px;
        }
        li a.ui-btn.border-bottom {
            border-bottom-width: 1px;
        }
        /* Hide the delete button on touch devices */
        ul.touch li.ui-li-has-alt a.delete {
            display: none;
        }
        ul.touch li.ui-li-has-alt a.ui-btn {
            margin-right:0;
        }
        /* Styling for the popup */
        #confirm p {
            text-align: center;
            font-size: inherit;
            margin-bottom: .75em;
        }
        #title_bt {
            color:#02534a;
            font-family:Microsoft YaHei;
        }
        .ui-content .ui-listview{margin:1em 0;}
        #title_bt
        {
            color:#02534a;
            font-family:Microsoft YaHei;
        }

        .title_font
        {
            border-bottom-width:1px;
            margin:1px;
            color:black;
            font-family:Microsoft YaHei;
        }

        body, input, select, textarea, button, .ui-btn
        {
            font-size: 1em;
            line-height: 1.3;
            font-family: Microsoft Yahei;
        }

        .ui-listview>li p
        {
            font-size: 1em;
            font-weight: 400;
            display: block;
            margin: .6em 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .ui-icon-mydelete-icon:after {
            background-image:url(../images/default/delete.png);

        }
        .ui-listview>li.ui-li-has-alt>.ui-btn+.ui-btn{
            border-left-width:0;
        }
        .ui-content .ui-listview{
            border-radius:.3125em;
            -webkit-border-radius:.3125em;
            border-width:1px;
        }
    </style>

    <script>
//        var _hmt = _hmt || [];
//        (function() {
//            var hm = document.createElement("script");
//            hm.src = "//hm.baidu.com/hm.js?2be0e1538ccd7d5f370beddfe04f507b";
//            var s = document.getElementsByTagName("script")[0];
//            s.parentNode.insertBefore(hm, s);
//        })();
    </script>

</head>

<body>

<div data-role="page" id="demo-page"  data-title="留言记录列表" data-url="demo-page">

    <div role="main" class="ui-content">
        <h2 id = "title_bt" style="margin-top:3px;margin-bottom:1px">留言列表</h2>
        <ul id="list" class="touch" data-role="listview" data-icon="false"  data-split-icon="mydelete-icon" >

        </ul>

        <button style="margin:0;-webkit-border-radius:0;border-radius:0;" onclick="getMoreInBox(this)" class="ui-btn ui-corner-all ui-btn-a">显示更多信息</button>

    </div><!-- /content -->

    <div id="confirm" class="ui-content ui-popup  ui-overlay-shadow ui-corner-all" data-role="popup" data-theme="a" style="background-color:#fff;solid;width:225px;box-shadow:0 0 12px rgba(0, 0, 0, .6);border-width:0px;align:center;">
        <p style="font-weight:bold;">提示</p>
        <p id="question">确定删除该信息吗?</p>
        <div class="ui-grid-a">
            <div class="ui-block-a"  style="background-color: #ffffff;">
                <a id="yes" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">是</a>
            </div>
            <div class="ui-block-b"  style="background-color: #ffffff;">
                <a id="cancel" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">否</a>
            </div>
        </div>
    </div><!-- /popup -->
</div>

    <script language="JavaScript" type="text/javascript">
        $(document).ready(function()
        {
            createpage();
        });

        function createpage(){
            $.get(
                    "/message/getMsgList",
                    null,
                    function(data) {
                        console.log(data);
                        if(data.code = '000000'){
                            var result = data.result;
                            if(result.length > 0){
                                for (var i = 0; result.length > i; i++) {
                                    var leave_time = result[i].create_time ;
                                    var date = new Date(leave_time).format("yyyy-MM-dd");
                                    var leave_title = result[i].title ;
                                    var leave_conte = result[i].content ;
//                                    var li1 = $('<li style="border-left:#ddd 1px solid;border-right:#ddd 1px solid"><a onclick="sendData(this);" href="#"><p>'+date+'</p><p class="topic"><strong>'+leave_title+'</strong></p><p>'+leave_conte+'</p></a><a href="Javascript:void(0)" onclick="confirmAndDelete(this);" class="delete">Delete</a><input type="hidden" value="'+result[i].id +'" /></li>');
                                    var li1 = $('<li style="border-left:#ddd 1px solid;border-right:#ddd 1px solid"><a onclick="sendData(this);" href="#"><p>'+date+'</p><p class="topic"><strong>'+leave_title+'</strong></p><p>'+leave_conte+'</p></a><input type="hidden" value="'+result[i].id +'" /></li>');
                                    li1.appendTo("#list");
                                }
                            }
                            $( "#list" ).listview( "refresh" );
                        }
                    });
            $( "#list").removeClass( "touch" );
        }

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
<!--<script language="JavaScript" type="text/javascript">

//    $(document).ready(function()
//    {
//        createpage();
//
//    });
//
//    //获取url 参数
//    function getUrlParam(name)
//    {
//        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//        if (r!=null) return unescape(r[2]); return null; //返回参数值
//    }
//
//    function createpage(){
//
//        var openid = "" ;
//        openid = getUrlParam("openid");
//        $.post(
//                "../leavemsg/loadMessageList",
//                {openid:openid},
//                function(data) {
//                    var messageList = JSON.parse(data);
//                    if(messageList.item.length>0)
//                    {
//                        for(var i=0;i<messageList.item.length;i++)
//                        {
//                            var leave_time = messageList.item[i].leave_time ;
//                            var leave_title = messageList.item[i].leave_title ;
//                            var leave_conte = messageList.item[i].leave_conte ;
//                            var li1 = $('<li style="border-left:#ddd 1px solid;border-right:#ddd 1px solid"><a onclick="sendData(this);" href="#"><p>'+leave_time+'</p><p class="topic"><strong>'+leave_title+'</strong></p><p>'+leave_conte+'</p></a><a href="Javascript:void(0)" onclick="confirmAndDelete(this);" class="delete">Delete</a><input type="hidden" value="'+messageList.item[i].id +'"/ ></li>');
//                            li1.appendTo("#list");
//                        }
//                    }
//                    $( "#list" ).listview( "refresh" );
//                });
//
//        $( "#list" ).removeClass( "touch" );
//    }
//
//    // 删除
//    function confirmAndDelete( elem ) {
//        var mesID = $(elem).next().val();
//        var openid = getUrlParam("openid");
//        $( "#confirm" ).popup( "open" );
//        $( "#confirm #yes" ).on( "click", function() {
//            $.ajax(
//                    {
//                        url:"../leavemsg/deleteMessage",
//                        type:'post',
//                        data:{id:mesID,openid:openid},
//                        success:function(data)
//                        {
//                            if(data == "ok"){
//
//                                $(elem).parent().remove();
//                            }
//                        }
//                    });
//        });
//
//    }
//
//    //获取更多留言记录信息
//    function getMoreInBox(btn) {
//
//        var msgSize = $("#list li").length;
//        if( msgSize < 5 ){
//            $(btn).html("没有更多的信息了");
//            return ;
//        }else{
//
//            var openid = getUrlParam("openid");
//            $.post(
//                    "../leavemsg/loadMoreMessage",
//                    {msgSize:msgSize,openid:openid},
//                    function(data) {
//                        var messageList = JSON.parse(data);
//                        if(messageList.msg == "yes") {
//                            for(var i=0;i<messageList.item.length;i++){
//
//                                var li1 = $('<li style="border-left:#ddd 1px solid;border-right:#ddd 1px solid"><a onclick="sendData(this);" href="#"><p>'+messageList.item[i].leave_time+'</p><p class="topic"><strong>'+messageList.item[i].leave_title+'</strong></p><p>'+messageList.item[i].leave_conte+'</p></a><a href="Javascript:void(0)" onclick="confirmAndDelete(this);" class="delete">Delete</a><input type="hidden" value="'+messageList.item[i].id +'"/ ></li>');
//                                li1.appendTo("#list");
//                            }
//                            $( "#list" ).listview( "refresh" );
//
//                        } else {
//
//                            $(btn).html("没有更多的信息了");
//                        }
//                    }
//            );
//        }
//    }
//
//    function sendData(data)
//    {
//        var id = $(data).parent().find("input:hidden").val();
//        var openid = getUrlParam("openid");
//        window.location = "../html/messageDetails.html?id=" + id+"&openid="+openid;
//    }

</script>-->

<script th:src="@{/static/js/default/weixin.js}" ></script>
</body>
</html>